情境

內部系統最常遇到的需求，就是使用者需要管理資料，以下分享這樣的管理行為如何操作，通常是在表格上的對應資料上放上按鈕來操作

刪除

• 請出現彈窗，讓使用者確認是否刪除，通常都會有這樣的需求，但是可能不會明確寫在規格書裡面，這樣的確認也比較符合正常人的使用流程，不會不小心按掉東西就不見了，你可能還需要幫他復原資料，如果是重要的資料就更可怕了，比如說是系統權限最大的管理人被刪掉。
• 刪除之後，建議出現一個刪除成功的視窗，這樣使用者才能比較明確的知道執行結果。
  除了在使用者體驗上會比較好以外，如果遇到法律上的問題或是公司究責，也可以明確的表示自己有盡到告知的責任，用來保護自己。

新增與修改

• 修改時需要預帶資料，新增跟修改的元件會做成共用的，避免有欄位調整的時候改A忘B，會藉由參數來確認是不是編輯模式

• 通常有以下三種型式

  • 彈窗

    • 像是員工資料修改

    // employee.html
    <!-- 編輯彈窗 -->
    <app-detail-modal [isVisible]="isModalVisible" [employee]="selectedEmployee" [isEdit]="isEditMode"
    (closeModal)="handleCloseModal()">
    </app-detail-modal>
    
     // employee.ts
     // 操作處理
     onEdit(employee: Employee): void {
        this.isEditMode = true;
        this.selectedEmployee = employee;
        this.isModalVisible = true;
     }
    
     // detail.modal.ts
       ngOnChanges(changes: SimpleChanges): void {
            // 監聽員工資料變化，用於編輯模式
        if (this.employee && this.isEdit) {
          console.log('編輯員工:', this.employee);
          this.patchFormValue();
        }
      }
    
    patchFormValue(){
       this.validateForm.patchValue(this.employee);
    }
    
    

  

  • 跳轉新頁面

    • 如果欄位超級多，彈窗不好閱讀跟操作的時候，就會帶到一個新頁面操作，在編輯的情境下，通常是在URL上面帶上id，在新頁面上用id找出這筆編輯的資料再顯示在畫面上，頁面上直接修改的方式可以直接參考Ng-zorro上的說明，至於頁面上方顯示的資料的方法，也可以參考上面的patchValue

      // 編輯
      onEdit(employee: Employee): void {
        this.routes.navigate(['/employee/edit', employee.id]);
      }
    
      // 新增
      onCreate(employee: Employee): void {
        this.routes.navigate(['/employee/create']);
      }
    

  • 頁面上直接修改

不同區塊：他需要看到原始資料，或是你覺得他需要

同區塊

如何滑順的刷新

另外凡是新增、修改、刪除，有跟實際資料作互動的動作，都需要做頁面刷新的動作，雖然規格書可能不會明確說明這樣的行為，但是使用者通常預設他做完之後要看到差異，不然他不會知道自己有沒有做成功。
同時最好加入Loading管理使用者操作，避免他重複操作同一個按鈕，如何加入Loading會在你前面篇幅已經提到，可以一併使用。
流程是：點擊確認 → 送API → loading → 成功訊息→ 按下成功訊息的確定後 → 列表刷新